<template>
  <el-button round @click="toggleState" v-if="currentText.includes('...')" :loading="true">
    {{ currentText }}
  </el-button>
    <el-button round @click="toggleState" v-else >
    {{ currentText }}
  </el-button>
</template>

<script setup>
import { ref, watch } from 'vue'
import { emitter } from '@/utils/emitter.js'

const props = defineProps({
  state: {
    type: Number,
    default: 0
  },
  filetype: {
    type: String,
    default: 'no'
  },
  displayTexts: {
    type: Array,
    default: () => ['生成中', '状态1', '状态2']
  }
})

const emit = defineEmits(['update:state'])

const currentState = ref(props.state)

const currentText = ref(props.displayTexts[props.state] || '未知状态')

// 添加props.state的监听器
watch(() => props.state, (newVal) => {
  currentText.value = props.displayTexts[newVal] || '未知状态'
})

const toggleState = () => {
  // currentState.value = (currentState.value + 1) % props.displayTexts.length
  // console.log("e38", props.filetype);
  if (props.filetype == 'none' && props.state == 2) {
    // emitter.emit('setRightStatus', false)

    currentState.value = (currentState.value + 1) % props.displayTexts.length
    setTimeout(() => {
      currentState.value = (currentState.value + 1) % props.displayTexts.length
      emit('update:state', currentState.value)

    }, 1000 * 1);
    // console.log("E", currentState.value);

    emit('update:state', currentState.value)
  }
}
</script>

<style scoped>
.dynamic-border-button {
  position: relative;
  padding: 8px 16px;
  border-radius: 50px;
  color: #333333;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  cursor: pointer;
  background: #fff;
  border: none;
  outline: none;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease;
}

.dynamic-border-button::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  border-radius: 50px;
  background: linear-gradient(45deg,
      #ff0000, #ff7300, #fffb00, #48ff00,
      #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  animation: borderFlow 8s linear infinite;
  opacity: 0.8;
  transition: 0.5s;
}

.dynamic-border-button:hover::before {
  opacity: 1;
}

.dynamic-border-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 50px;
  background: #fff;
  margin: 2px;
}

@keyframes borderFlow {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}
</style>
